<template>
  <div class="loan-application-container">
    <div class="title">
      Loan application
    </div>

    <Promised :promise="fieldsPromise">
      <template v-slot:pending>
        <Skeleton />
      </template>
      <template v-slot>
        <section>
          <a-modal
            width="80%"
            :title="loanModal.title"
            :visible="loanModal.visible"
            :mask-closable="false"
            :keyboard="false"
            @cancel="loanModal.visible = false"
          >
            <!-- :closable="false" -->
            <iframe
              id="mainIframe"
              name="mainIframe"
              :src="loanModal.url"
              frameborder="0"
              scrolling="auto"
            />
            <template #footer />
          </a-modal>
          <div class="loan-information">
            <div class="infos-container">
              <div class="info">
                <div class="label">
                  贷款额度:
                </div>
                <div class="value">
                  $ {{ risk.amount }}
                </div>
              </div>
              <div class="info">
                <div class="label">
                  手续费:
                </div>
                <div class="value">
                  $ {{ risk.charges_free }}
                </div>
              </div>
              <div
                v-if="hasInterestRatio"
                class="info"
              >
                <div class="label">
                  利息:
                </div>
                <div class="value">
                  {{ risk.interest_ratio * 100 }}%
                </div>
              </div>
              <div
                v-if="hasLateFeeRatio"
                class="info"
              >
                <div class="label">
                  滞纳金:
                </div>
                <div class="value">
                  {{ risk.late_fee_ratio * 100 }}%
                </div>
              </div>
              <div class="info">
                <div class="label">
                  还款方式:
                </div>
                <div class="value">
                  {{ risk.repay_methods | repaymentMethod }}
                </div>
              </div>
              <div class="info">
                <div class="label">
                  银行卡:
                </div>
                <div class="value">
                  {{ risk.card.accountNo }} {{ risk.card.name }}
                </div>
              </div>
            </div>
          </div>
          <div class="loan-desc-container">
            <div class="desc">
              · Your loan is provided to XX Bank
            </div>
            <div class="desc">
              · Click next to indicate that you have agreed to the relevant agreement, and use the loan
              information for personal daily consumption. Please be rational and cautious about excessive consumption.
            </div>
          </div>
          <div class="button-submit">
            <!-- shape="round" -->
            <a-button
              type="primary"
              size="large"
              class="primary-button"
              :loading="loading"
              :disabled="loanDisabled"
              @click="submitLoan"
            >
              Submit
            </a-button>
          </div>
        </section>
      </template>

      <template v-slot:rejected />
    </Promised>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import form from '../mixins/form';
import actions from '../mixins/actions';
import risk from '../mixins/risk';
import loan from './loan';

export default {
  name: 'LoanApplication',

  mixins: [form, actions, risk, loan],

  computed: {
    ...mapGetters(['authentication']),

    // 滞纳金
    hasLateFeeRatio() {
      return this.risk.late_fee_ratio > 0;
    },

    // 利息
    hasInterestRatio() {
      return this.risk.interest_ratio > 0;
    },

    // 任务id
    tid() {
      return this.$route.params.tid;
    }
  },

  filters: {
    repaymentMethod(repayment) {
      const repayments = [];

      repayment.forEach((item) => {
        repayments.push(
          `${item.ratio * 100}% repayment after ${item.day} days`
        );
      });

      return repayments.toString();
    }
  }
};
</script>

<style lang="scss" scoped>
.loan-application-container {
  background-color: $white;
  padding-top: 48px;
  padding-bottom: 87px;
  & > .title {
    text-align: center;
    font-size: 40px;
    margin: $margin-md 0;
    font-weight: bold;
  }

  .loan-information {
    background: rgba(56, 125, 255, 0.03);
    border: 1px solid $gray-18;
    padding: 30px 240px;

    .infos-container {
      .info:nth-last-of-type(1) {
         margin-bottom: 0;
      }
    }
    .infos-container {
      .info {
        display: flex;
        align-items: center;
        font-size: $font-size-lg;
        margin-bottom: $margin-xs;
        .label {
          width: 9.5em;
          text-align: right;
        }
        .value {
          padding: $padding-base;
          background-color: $white;
          flex: 1;
          text-align: right;
          margin-left: $margin-xs;
        }
      }
    }

  }
  .loan-desc-container {
    padding: 0 240px;
    margin-top: $margin-sm;
    .desc:nth-last-child(1) {
      margin-bottom: 0;
    }

    .desc {
      color: $gray-11;
      margin-bottom: $margin-base;
    }
  }
  .button-submit {
    display: flex;
    justify-content: center;
    margin-top: $margin-sm;
    .primary-button {
      width: 420px;
      font-size: $font-size-lg;
    }
  }
}

#mainIframe {
  width: 100%;
  height: 70vh;
}
</style>
